<template>
  <div class="goods">
    <div class="wrap">
      <Crumb> </Crumb>
      <img src="../assets/img/banner.4c6b6225.png" width="100%" alt="" />
      <ul class="options">
        <li>
          <strong>排序：</strong>
          <span :class="flag1==index?'active':''" v-for="item,index in option1" :key="index"
            @click="option1Click(index,item.min,item.max)"
          >
            {{item.txt}}
          </span>
          <!-- <span>我还可以兑换</span>
          <span>0-500个</span>
          <span>500-1000个</span>
          <span>1000-1500个</span>
          <span>1500-2500个</span> -->
        </li>
        <li>
          <strong>分类：</strong>
          <span  :class="flag2==index?'active':''" v-for="item,index in option2" :key="index"
          @click="option2Click(index,item.type)"
          >
            {{item.txt}}
          </span>
        </li>
      </ul>
      <List :arr="goodsListShow" maxLength="3000"/>
      <p class="loading"> 
        <i class="iconfont icon-loading" v-show="!isNoData"></i> 
        {{isNoData?"已经没有数据了":"正在加载..."}}</p>
    </div>
  </div>
</template>                            
<script>

import Crumb from "../components/Crumb.vue";
import List from "../components/home/List.vue";
import {GetListAPI} from "@/request/api.js"
import {getClientHeight,getScrollTop,getScrollHeight} from "@/utils"
export default {
  data() {
    return {
        // 栏目 目前可提供的参数是 1->精品推荐 2-> 热门兑换 0->全部
        did:0,
        // ( 1->实体商品 2->虚拟商品 0->全部 )
        type:0,
        // 积分的最小值
        min:0,
        // 积分的最大值
        max:100000,
        // 搜索的关键词
        keyword:"",
        // 商品数组
        goodsList:[],

        // 排序数组选项
        option1:[
          {min:0,max:100000,txt:"全部"},
          {min:0,max:0,txt:"我能兑换的"},
          {min:0,max:500,txt:"0-500个"},
          {min:500,max:1000,txt:"500-1000个"},
          {min:1000,max:1500,txt:"1000-1500个"},
          {min:1500,max:2500,txt:"1500-2500个"},
          {min:2500,max:6500,txt:"2500-6500个"},
          {min:6500,max:10000,txt:"6500-10000个"},
          {min:10000,max:100000,txt:"10000-100000个"},
        ],
        // 实物礼品 虚拟礼品
        option2:[
          {type:0,txt:"全部"},
          {type:1,txt:"实物礼品"},
          {type:2,txt:"虚拟礼品"},
        ],
        // flag1 表示option1中的当前样式
        flag1:0,
        // flag2 表示option2中的当前样式
        flag2:0,

        // 用来展示的goodsList
        goodsListShow:[],
        // 加载页数
        page:1,
        // 每一页条数
        size:8,
        // isLoading表示是不是正在加载
        isLoading:false,

        // isNoData表示是不是没有数据了，  true表示真的没有数据了
        isNoData:false

    };
  },
  mounted(){
    // 添加滚动事件的监听
    window.addEventListener("scroll",this.scrollFn)
  },
  beforeDestroy(){
    // 删除全局事件
    window.removeEventListener("scroll",this.scrollFn)
  },
  methods:{
    scrollFn(){  // 频繁触发的事件
    // 节流：利用一个变量，控制不要在一段时间（setTimeout）内重复执行某一段代码
        // console.log("已经在滚动了！");
        // 需求：来到地步了才来加载
        // 判断，是不是到底部了

        // if(到底部了){
        // if(窗口高度 + 超出窗口的页面高度 == 总页面高度){
        if(getClientHeight() + getScrollTop() >= getScrollHeight()-20){
          console.log("到底部了");
          
          // 在加载之前先判断是不是没有数据了
          if(this.goodsListShow.length>=this.goodsList.length){
              // 如果真的没有数据了
              this.isNoData = true
              return
          }

          // 此时的加载必须保证 isLoading 为false，如果是true就不能继续加载
          if(!this.isLoading){
            this.isLoading = true;
            // 加载: 在goodsList中取出8条，push到 goodsListShow
            this.page++;

            setTimeout(()=>{
              // 假设要第2页数据， let i = 8;   i<16;
              // 假设要第3页数据， let i = 16;   i<24;
              for(let i = this.size*(this.page-1); i<this.size*this.page; i++){
                // 最后一页的时候不一定是8条，this.goodsList[i]有可能是undefined
                this.goodsList[i]?
                this.goodsListShow.push(this.goodsList[i]):""; 
              }
              
              // 后面可以再进行下一页加载
              this.isLoading = false
            },500)
          }
          
          
          // this.goodsListShow.push(this.goodsList[8]);
          // this.goodsListShow.push(this.goodsList[9]);
          // this.goodsListShow.push(this.goodsList[10]);
          // this.goodsListShow.push(this.goodsList[11]);
          // this.goodsListShow.push(this.goodsList[12]);
          // this.goodsListShow.push(this.goodsList[13]);
          // this.goodsListShow.push(this.goodsList[14]);
          // this.goodsListShow.push(this.goodsList[15]);
          
        }
    },
    option1Click(i,min,max){
      // 样式处理
      this.flag1 = i;
      // 更新最小值和最大值
      this.min = min;
      this.max = max;
      // 发起请求，直接调用getListData方法
      this.getListData();
    },
    option2Click(i,type){
      // 样式处理
      this.flag2 = i;
      
      // 更新type值
      this.type=type;

      // 发起请求，直接调用getListData方法
      this.getListData();
    },
    async getListData(){
      let res = await GetListAPI({
        did:this.did,
        type:this.type,
        min:this.min,
        max:this.max,
        keyword:this.keyword,
      });
      if(!res)return;
      this.goodsList = res.data;

      // 只拿前8条数据进行渲染
      this.goodsListShow = this.goodsList.filter((item,index)=>index<8);

      // 初始化数据
      // 加载页数
      this.page=1;
      // isLoading表示是不是正在加载
      this.isLoading=false;
      // isNoData表示是不是没有数据了，  true表示真的没有数据了
      this.isNoData=false;

      // 判断是不是没有数据了
      if(this.goodsListShow.length>=this.goodsList.length){
          // 如果真的没有数据了
          this.isNoData = true
      }
    }
  },
  created(){
    this.keyword = this.$route.query.keyword || ""

    this.getListData()
  
  },
  watch:{
    "$route.query.keyword":{
      handler(newVal,oldVal){
        // 什么时候执行？？ 地址栏上的keyword一变化就执行
        this.keyword=newVal;
        this.getListData()
      }
    }
  },
  components: {
    Crumb,
    List,
  },
  
};
</script>

<style lang = "less" scoped>
@import "../assets/styles/global.less";

.goods {
  padding-bottom: 50px;
  background: #efefef;
  padding-top: 20px;
  .options {
    padding-top: 20px;
    padding-bottom: 40px;
    li {
      margin-top: 20px;
      strong {
        color: #000;
        font-weight: bold;
      }
      span {
        margin-right:20px;
        margin-left: 10px;
        cursor: pointer;
        color: #999;
        &.active {
          color: @base-color;
          font-weight: bold;
        }
      }
    }
  }
}
.loading{
  text-align: center;
  margin-top: 20px;
}
</style>